<template>
    <div class="jx-content" id="TrainingEnvironment">
        <el-row :gutter="50">
            <el-col :span="6" v-for="(item, index) in courseList" :key="index">
                <div class="el-col-content" @mouseenter="hoverImg(item)" @mouseleave="leaveImg(item)"  @click="GoDetail(item)">
                    <div class="content-img">
                        <img :src="item.iconUrl">
                    </div>
                    <div class="content-box">
                        <div class="content-title" v-text="item.trainingName"></div>
                        <div class="content-name" v-text="item.trainingSource"></div>
                        <div class="content-text" v-text="item.description"></div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-dialog :close-on-click-modal="false"  class="dialog-virtual" title="提示" :visible.sync="dialogVirtual" width="460px">
            <div class="dialog-content">
                <i class="iconfont icon-tishi"></i>
                <p>有其它实验正在进行中，是否停止它进入该实验?</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogVirtual = false">取 消</el-button>
                <el-button class="button-style" @click="VirtualSave">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                courseList:[],
                trainingData: '',
                // 是否进入实验显示隐藏
                dialogVirtual: false,
            }
        },
        created() {
            let self = this

            // 环境实训列表
            self.InitTrainingList()
        },
        methods:{
            // 环境实训列表
            InitTrainingList() {
                let self = this

                self.$http.get('/tes/training').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        // 环境实训列表复制
                        self.courseList = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            GoDetail(item) {
                let self = this
                let routeData
                self.$http.get('/tes/experiment/training/'+item.trainingId+'/prompt').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data){
                            self.trainingData = item
                            // 弹窗是否强制跳转
                            self.dialogVirtual = true
                        }else{
                            let newWindow = window.open()
                            // 跳转实验页
                            routeData = self.$router.resolve({
                                name: "TeacherVirtualMachine",
                                query: {
                                    trainingId: item.trainingId,
                                    trainingName: item.trainingName
                                }
                            })
                            // window.open(routeData.href, '_blank')
                            newWindow.location.href = routeData.href

                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 确定跳转实验详情
            VirtualSave(){
                let self = this
                let newWindow = window.open()
                let routeData
                // 跳转实验页
                routeData = self.$router.resolve({
                    name: "TeacherVirtualMachine",
                    query: {
                        trainingId: self.trainingData.trainingId,
                        trainingName: self.trainingData.trainingName
                    }
                })
                // window.open(routeData.href, '_blank')
                newWindow.location.href = routeData.href
                window.location.reload()
            },
            hoverImg(item){
               // item.iconUrl = item.iconUrl+'.fan.png'
            },
            //鼠标离开变色
            leaveImg(item){
                //item.iconUrl = item.iconUrl.substr(item.iconUrl, item.iconUrl.lastIndexOf('.', item.iconUrl.lastIndexOf('.') - 1) )
            },
        }
    }
</script>
<style scoped lang="scss">
    @import "./../../../styles/ypublic.scss";
    .jx-content{
        background: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        margin-top: 30px;
    }
    // 进入实验提示
    .dialog-virtual{
        .dialog-content{
            text-align: center;
            i{
                font-size: 50px;
                color: #d6d6d6;
                display: block;
                margin-top: 25px;
            }
            p{
                font-size: 14px;
                color: #727272;
            }
        }
    }
    #TrainingEnvironment{
        padding: 20px 45px;
        .el-row{
            .el-col{
                // width:20%;
                height:280px;
                margin-bottom: 30px;
                .el-col-content{
                    width: 100%;
                    cursor: pointer;
                    transition: all 0.3s;
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
                    &:hover{
                        transform: scale(1.05);
                        transition: transform .3s;
                        cursor: pointer;
                        box-shadow: 0 0 20px  #e0e0e0;
                    }
                    .content-img{
                        height: 130px;
                        line-height: 130px;
                        text-align: center;
                        background: #485f8c;
                        border-radius: 5px 5px 0 0;
                    }
                    .content-box{
                        height: 150px;
                        background: #fff;
                        border-radius: 0 0 5px 5px;
                        overflow: hidden;
                        .content-title{
                            font-size: 15px;
                            line-height: 1.5;
                            padding: 0px 31px;
                            text-align: center;
                            margin-top: 15px;
                            color: #485f8c;
                            font-weight: bold
                        }
                        .content-name{
                            font-size: 14px;
                            line-height: 1;
                            text-align: center;
                            color: #888888;
                            margin-top: 15px
                        }
                        .content-text{
                            margin-top: 10px;
                            font-size: 12px;
                            color: #888888;
                            padding: 0 25px;
                            height: 38px;
                            line-height: 18px;
                            overflow: hidden;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                        }
                    }
                }
            }
        }
    }
</style>


